<template>
	<div>
		<el-upload
			:action="useOss ? ossUploadUrl : minioUploadUrl"
			:data="useOss ? dataObj : null"
			list-type="picture"
			:multiple="false"
			:headers="myHeaders"
			:show-file-list="true"
			:file-list="fileList"
			:before-upload="beforeUpload"
			:on-remove="handleRemove"
			:on-success="handleUploadSuccess"
			:on-preview="handlePreview"
			:limit="limit"
		>
			<!-- <i class="el-icon-plus"></i> -->
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible" :fullscreen="true">
			<img width="100%" :src="preview" alt="" />
		</el-dialog>
	</div>
</template>
<script>
import { Session } from '@/utils/storage';
export default {
	name: 'singleUpload',
	props: {
		value: Array,
		type: String,
		url: {
			type: String,
			default: 'api/OAuth/UploadFile',
		},
		limit: {
			type: Number,
			default: 5,
		},
	},
	computed: {},
	data() {
		return {
			dataObj: {
				// callback:'',
			},
			dialogVisible: false,
			useOss: true, //使用oss->true;使用MinIO->false
			ossUploadUrl: process.env.VUE_APP_BASE_API + this.url,
			minioUploadUrl: 'http://localhost:8080/minio/upload',
			fileList: [],
			preview: '',
			myHeaders: {
				Authorization: `Bearer ${Session.get('auth')}`,
			},
		};
	},
	mounted() {
		this.getImgUrl();
	},
	watch: {},
	methods: {
		emitInput(val) {
			this.$emit('input', val);
		},
		handleRemove(file, fileList) {
			this.emitInput('');
		},
		handlePreview(file) {
			this.preview = file.url;
			this.dialogVisible = true;
		},
		beforeUpload(file) {
			let _self = this;
			if (!this.useOss) {
				//不使用oss不需要获取策略
				return true;
			}
			// return new Promise((resolve, reject) => {
			//     policy()
			//         .then((response) => {
			//             _self.dataObj.policy = response.data.policy
			//             _self.dataObj.signature = response.data.signature
			//             _self.dataObj.ossaccessKeyId = response.data.accessKeyId
			//             _self.dataObj.key = response.data.dir + "/${filename}"
			//             _self.dataObj.dir = response.data.dir
			//             _self.dataObj.host = response.data.host
			//             // _self.dataObj.callback = response.data.callback;
			//             resolve(true)
			//         })
			//         .catch((err) => {
			//             console.log(err)
			//             reject(false)
			//         })
			// })
		},
		handleUploadSuccess(res, file) {
			if (res.code == 200) {
				this.$message.success(res.meg || '上传成功');
				this.setShopImg(res.data, this.type);
			} else {
				this.$message.error(res.meg || '上传失败');
			}
		},
		setShopImg(url, type) {
			this.$emit('setShopImg', url, type);
		},
		getImgUrl() {
			setTimeout(() => {
				const data = this.value;
				this.fileList = [];

				if (data && data.length > 0) {
					data.forEach(async (e) => {
						const url = await this.$store.dispatch('publics/UploadFile', e);
						this.fileList.push({ name: e.name, url: url });
					});
				}
			}, 500);
		},
	},
};
</script>
<style scoped>
.el-dialog {
	background-color: rgba(0, 0, 0, 0.1);
}
</style>


